import React from 'react';
import { Icon} from 'semantic-ui-react'
import ApolloClient from "apollo-boost";
import gql from "graphql-tag";

const client = new ApolloClient({
  uri: "http://localhost:80/graphql"
});
// 定义查询
const GET_MAP_HOUSE = gql`
  query QueryMapHouseData($lng: Float, $lat: Float, $zoom: Int) {
    MapHouseData(lng: $lng, lat: $lat, zoom: $zoom) {
      list {
        x
        y
      }
    }
  }
`;

// 百度地图API功能
const BMap = window.BMap;
const BMapLib = window.BMapLib;

/**
 * 显示地图标记
 * @param map 地图对象
 * @param xy 经纬度数组
 */
const shewMarker = (map, xy) => {
  var markers = [];
  var pt = null;
  for (var i in xy) {
    pt = new BMap.Point(xy[i].x, xy[i].y);
    markers.push(new BMap.Marker(pt));
  }
  // 地图上覆盖物的聚合效果
  var markerClusterer = new BMapLib.MarkerClusterer(map, {
    markers: markers,
    girdSize: 100,
    styles: [{
      background: 'rgba(12,181,106,0.9)',
      size: new BMap.Size(92, 92),
      textSize: '16',
      textColor: '#fff',
      borderRadius: 'true'
    }],
  });
  markerClusterer.setMaxZoom(50);
  markerClusterer.setGridSize(50);
}

class MapHouse extends React.Component {
  componentDidMount() {
    let defaultX = 121.48130241985999;
    let defaultY = 31.235156971414239;
    let defaultZoom = 12;

    // 创建Map实例
    var map = new BMap.Map("allmap"); 
    // 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom(new BMap.Point(defaultX, defaultY), defaultZoom);
    // 添加地图类型控件
    map.addControl(new BMap.MapTypeControl()); 
    // 设置地图缩放
    map.addControl(new BMap.ScaleControl({
      anchor: window.BMAP_NAVIGATION_CONTROL_ZOOM
    }));
    // 设置地图导航
    map.addControl(new BMap.NavigationControl({
      enableGeolocation: true
    }));
    // 设置缩略图控件。
    map.addControl(new BMap.OverviewMapControl());
    // 设置地图显示的城市 此项是必须设置的
    map.setCurrentCity("上海");
    // 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    const showInfo = () => {
      let cp = map.getCenter(); // 地图中心位置的经纬度
      let zoom = map.getZoom(); // 缩放级别
      client.query({query: GET_MAP_HOUSE, variables: {"lng":cp.lng,"lat":cp.lat,"zoom":zoom}})
        .then(result =>{
          shewMarker(map, result.data.MapHouseData.list)
        });
    }
    // 拖拽地图结束时执行
    map.addEventListener("dragend", showInfo);
    // 缩放结束事件
    map.addEventListener("zoomend",showInfo);

    // 拖动开始时和缩放开始时, 清除之前的标志物. 防止标志物重叠, 影响标志物的透明度
    map.addEventListener("dragstart", ()=>{map.clearOverlays();});
    map.addEventListener("zoomstart", ()=>{map.clearOverlays();});

    // 查询数据
    client.query({query: GET_MAP_HOUSE, variables: {"lng":defaultX,"lat":defaultY,"zoom":defaultZoom}})
    .then(result =>{
      shewMarker(map, result.data.MapHouseData.list)
    });
  }
  render() {
    return ( 
      <div className = 'map-house' >
        <div className = "map-house-title">
          <Icon onClick = {this.props.hideMap} name = 'angle left' size = 'large'/> 地图找房 
        </div> 
        <div className = "map-house-content" id='allmap'></div>
      </div>
    );
  }
}
export default MapHouse;
